<template>

  <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">管理后台</h2>
        <a href="/admin/blog" :style="{'background-color': $store.state.ao1}">博客</a>
        <a href="/admin/type" :style="{'background-color': $store.state.ao2}">分类</a>
        <a href="/admin/tag" :style="{'background-color': $store.state.ao3}">标签</a>



        <div class="right m-item menu">
          <div class="ui dropdown item">



            <div class="text" @click="toAbout">
              <img class="ui avatar image" src="https://scpic.chinaz.net/files/pic/pic9/202012/apic29959.jpg">
<!--              <span>session.user.nickname</span>-->
            </div>
<!--            <i class="dropdown icon"></i>-->

            <el-select v-model="lhd" @change="hold" :placeholder="username">
              <el-option label="退出登录" value="0"></el-option>
              <el-option label="个人信息" value="1"></el-option>
<!--              <el-option label="基金" value="3"></el-option>-->
            </el-select>


<!--            <el-table-column :label="操作" align="center" class-name="small-padding ">-->
<!--              <template slot-scope="{row}">-->
<!--                <el-dropdown @command="handleCommand(row,$event)">-->
<!--                  <span class="el-dropdown-link">其他操作<i class="el-icon-arrow-down el-icon&#45;&#45;right" /></span>-->
<!--                  <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item command="handleUpdate">编辑</el-dropdown-item>-->
<!--                    <el-dropdown-item v-if="row.status===-1" command="handleEnabled">启用</el-dropdown-item>-->
<!--                    <el-dropdown-item v-if="row.status===1" command="handleDisabled">禁用</el-dropdown-item>-->
<!--                  </el-dropdown-menu>-->
<!--                </el-dropdown>-->
<!--              </template>-->
<!--            </el-table-column>-->




            <div class="menu">



<!--              <a href="/admin/logout" class="item">注销</a>-->
            </div>
          </div>
        </div>
      </div>
    </div>

  </nav>





<!--  <keep-alive>-->
<!--    <router-view v-if="$router.route().meta.keepAlive"></router-view>-->
<!--  </keep-alive>-->
<!--    <router-view v-if="!$router.meta.keepAlive"></router-view>-->
  <router-view />
<!--  <router-view></router-view>-->

<!--  <router-view :key="$route.fullPath" />-->


  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>



  <footer class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui inverted divided stackable grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="../../assets/images/wechat.png" class="ui rounded image" alt="" style="width: 110px">
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">Email：1920459132@qq.com</a>
            <a href="#" class="item m-text-thin">QQ：1920459132</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
          <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 Liuhandong Designed by Liuhandong</p>
    </div>
  </footer>


</template>

<script>
export default {
  name: "AdminBase",
  data(){
    return{
      flags: [
        {
          value: '原创',
          label: '原创',
        },
        {
          value: '转载',
          label: '转载',
        },
        {
          value: '翻译',
          label: '翻译',
        }
      ],
      flag: '',
      lhd: '',
      username: ''
    }
  },
  mounted() {
    this.username = sessionStorage.getItem("username");
  },
  methods:{
    hold(){
      // alert(this.lhd);
      if (this.lhd === "0"){
        sessionStorage.setItem("username",null);
        this.$router.push({path: '/login'});
      }else {
        this.$router.push({path: '/about'});
      }

    },
    toAbout(){
      this.$router.push({path: '/about'});
    }
    //事件方法
    // handleCommand(row, command) {
    //   switch (command) {
    //     case "handleUpdate":
    //       this.handleUpdate(row);
    //       break;
    //     case "handleEnabled":
    //       this.handleEnabled(row);
    //       break;
    //     case "handleDisabled":
    //       this.handleDisabled(row);
    //       break;
    //   }
    // },
    // //按钮事件方法....此处省略
    // handleUpdate() {
    //   alert(111);
    // },
    // handleEnabled() {
    //   alert(222);
    // },
    // handleDisabled() {
    //   alert(333)
    // }

  }
}
</script>

<style scoped>

</style>